<script setup lang="ts">
import { ref, watch } from 'vue'
import SliderContainer from './components/SliderContainer.vue'
const studyClass = ''
const studyContent = ''
const studyPlace = '自习室'
interface FormList {
  id: number
  class: string
  content: string
  studyPlace: string
  status: boolean
}
let formList = ref([
  {
    id: 1,
    class: 'Vue.js前端开发',
    content: '学习指令，例如v-if、v-for、v-modle等',
    studyPlace: '自习室',
    status: false,
  },
])
if (localStorage.getItem('formList') !== null && localStorage.getItem('formList') !== '[]') {
  formList = ref(JSON.parse(localStorage.getItem('formList') as string))
}

const deletePlan = (id: number) => {
  formList.value = formList.value.filter((item) => item.id !== id)
}
const addPlan = (id: number, studyClass: string, studyContent: string, studyPlace: string) => {
  formList.value.push({
    id: ++id,
    class: studyClass,
    content: studyContent,
    studyPlace: studyPlace,
    status: true,
  })
}
const changeStatus = (item: FormList, value: boolean) => {
  item.status = value
  // console.log(item.status)
}
watch(
  () => formList,
  (newValue) => {
    localStorage.setItem('formList', JSON.stringify(newValue.value))
  },
  {
    deep: true,
  },
)
</script>

<template>
  <div class="app-page">
    <div class="header">
      <div class="title">学习计划表</div>
      <div class="form">
        <!-- 学习科目输入框 -->
        <div class="form-category">
          <p class="form-category-p">学习科目</p>
          <input
            class="form-category-input"
            type="text"
            v-model="studyClass"
            placeholder="请输入学习科目"
          />
        </div>
        <!-- 学习内容输入框 -->
        <div class="form-category">
          <p class="form-category-p">学习内容</p>
          <input
            class="form-category-input"
            type="text"
            v-model="studyContent"
            placeholder="请输入学习内容"
          />
        </div>
        <div class="form-category">
          <p class="form-category-p">学习地点</p>
          <select class="form-category-input select" name="" v-model="studyPlace" id="study-place">
            <option value="自习室">自习室</option>
            <option value="教室">教室</option>
            <option value="寝室">寝室</option>
          </select>
        </div>
        <!-- 添加计划 -->
        <button
          class="form-add form-category"
          @click="addPlan(formList.length, studyClass, studyContent, studyPlace)"
        >
          添加
        </button>
      </div>
    </div>

    <div class="list">
      <div class="list-form">
        <span style="width: 80px">序号</span>
        <span style="width: 250px">学习科目</span>
        <span style="width: 480px">学习内容</span>
        <span style="width: 120px">学习地点</span>
        <span style="width: 150px">完成状态</span>
        <span style="width: 50px">操作</span>
      </div>
      <div class="list-content" v-if="formList != null">
        <div v-for="item in formList" :key="item.id" style="background-color: #f2f2f2">
          <span style="width: 80px">{{ item.id }}</span>
          <span style="width: 250px">{{ item.class }}</span>
          <span style="width: 480px">{{ item.content }}</span>
          <span style="width: 120px">{{ item.studyPlace }}</span>
          <span style="width: 150px">
            <SliderContainer :status="item.status" @change-status="changeStatus(item, $event)">{{
              item.status
            }}</SliderContainer>
          </span>
          <span class="delete" @click="deletePlan(item.id)" style="width: 50px">删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import './styles/header.css';
@import './styles/list.css';
* {
  padding: 0;
  margin: 0;
  display: flex;
}
p {
  font-size: 20;
}
.app-page {
  flex-direction: column;
  height: 100vw;
}
</style>
